<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta
      http-equiv="Cache-control"
      content="no-cache,no-store,must-revalidate"
    />
    <meta http-equiv="Cache" content="no-cache" />
    <title>新增页面</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
  </head>
  <body>
    <form class="layui-form" action="" lay-filter="form-filter">
      <div class="mainBox">
        <div class="main-container">
          <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">逻辑ID</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="maintsItemID"
                lay-verify="required"
                autocomplete="off"
                placeholder="请输入"
                class="layui-input"
                disabled
              />
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">作业项目</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="maintsItemName"
                lay-verify="required"
                autocomplete="off"
                placeholder="请输入作业项目"
                class="layui-input"
              />
            </div>
          </div>

          <!-- 记录方法, 单选-->
          <div class="layui-form-item">
            <label class="layui-form-label">记录方法</label>
            <div class="layui-input-block">
              <input
                type="radio"
                name="maintsItemContentType"
                value="text"
                title="文本"
                lay-filter="itemtype-filter"
                checked
              />
              <input
                type="radio"
                name="maintsItemContentType"
                value="select"
                title="单选"
                lay-filter="itemtype-filter"
              />
              <input
                type="radio"
                name="maintsItemContentType"
                value="checkbox"
                title="多选"
                lay-filter="itemtype-filter"
              />
            </div>
          </div>

          <!-- 记录的内容 , 填充-->
          <div class="layui-form-item">
            <div id="itemContent"></div>
          </div>
          <!-- qrtype -->
          <div class="layui-form-item">
            <div id="qrTypeOption"></div>
          </div>

          <!-- 是否多列 -->
          <div class="layui-form-item">
            <label class="layui-form-label">记录多列</label>
            <div class="layui-input-block">
              <select
                name="mutiColCount"
                lay-verify="required"
                lay-filter="mutiColCount-filter"
              >
                <option value="1">单列</option>
                <option value="2">2列</option>
                <option value="3">3列</option>
                <option value="4">4列</option>
              </select>
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">作业属于</label>
            <div class="layui-input-block">
              <input
                type="radio"
                name="belong2"
                value="belong2SecD"
                title="工程下所有设备"
                lay-filter="belong2-filter"
                checked
              />
              <input
                type="radio"
                name="belong2"
                value="belong2MacNo"
                title="设备号"
                lay-filter="belong2-filter"
              />
            </div>
          </div>

          <!-- 所属工程,填充 -->
          <div class="layui-form-item">
            <div id="belong2SecD"></div>
          </div>
          <!-- 所属设备,填充 -->
          <div class="layui-form-item" id="layui-form-item-belong2MacNo">
            <div id="belong2MacNo"></div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="button-container">
          <button
            type="submit"
            class="pear-btn pear-btn-primary pear-btn-sm"
            lay-submit=""
            lay-filter="maintsItemEdit"
          >
            <i class="layui-icon layui-icon-ok"></i>
            提交
          </button>
          <!-- <button type="reset" class="pear-btn pear-btn-sm">
						<i class="layui-icon layui-icon-refresh"></i>
						重置
					</button> -->
        </div>
      </div>
    </form>
    <script src="../../../component/layui/layui.js"></script>
    <script src="../../../component/pear/pear.js"></script>

    <script type="text/javascript">
      // 加载自定义模块,检查浏览器和token
      layui.extend({
        myheader: "{/}/lay-ext/myheader",
      });

      layui.use(["form", "jquery", "myheader", "layer", "laytpl"], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let myheader = layui.myheader;
        let layer = layui.layer;
        let laytpl = layui.laytpl;

        var optionData = {
          secdlist: [],
          macnolist: [],
        };

        // 定义全局 ajax的请求头
        myheader.ajaxGlobal(myheader.checkToken().tokenValue);

        // 获取父页的数据
        optionData.fuData = layui.sessionData("fu2zi").fuData;

        // 清空父传子时临时用的session对象
        layui.sessionData("fu2zi", null);
        // 初始化
        initPage("text", "belong2SecD");

        // 注册记录方法的单选事件
        itemTypeEvent();

        // 注册作业属于的单选事件
        belong2Event();

        // 注册所属工程-下拉列表的选择事件
        belong2SecDSelectEvent();

        initEdit();

        // form 确认上传
        form.on("submit(maintsItemEdit)", function (data) {
          $.ajax({
            url: parent.layui.myheader.baseUrl() + "/maintsItem/uptMaintsItem",
            data: JSON.stringify({
							maintsItemID: optionData.fuData.maintsItem.maintsItemID,
              maintsItemName: data.field.maintsItemName,
              maintsItemContent: data.field.maintsItemContent,
              maintsItemContentType: data.field.maintsItemContentType,
							qrTypeID:data.field.qrType===undefined?"":data.field.qrType,
              mutiColCount: data.field.mutiColCount,
              secDeptID: data.field.belong2SecD,
  						belong2MacNo:data.field.belong2MacNo===undefined?"":data.field.belong2MacNo
            }),
            contentType: "application/json", // 请求时的数据类型
            type: "post",
            success: function (data) {
              if (data.data == 1) {
                layer.msg(
                  "已保存",
                  {
                    time: 1000,
                  },
                  function () {
                    parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
                    parent.layui.table.reloadData("maintsItem-table", {
                      scrollPos: "fixed", // 保持滚动条位置不变 - v2.7.3 新增
                    });
                  }
                );
              } else {
                layer.msg("保存失败", {
                  time: 1000,
                });
              }
            },
          });
          return false;
        });

        $("[type='reset']").click(function () {
          initPage("text", "belong2SecD");
        });

        // 从父页获取的数据,渲染到子页上
        function initEdit() {
          //1. 直接赋值
          form.val("form-filter", {
            maintsItemID: optionData.fuData.maintsItem.maintsItemID,
            maintsItemName: optionData.fuData.maintsItem.maintsItemName,
            mutiColCount: optionData.fuData.maintsItem.mutiColCount,
          });
          //2.记录方法渲染
          form.val("form-filter", {
            maintsItemContentType:
              optionData.fuData.maintsItem.maintsItemContentType,
          });
          getItemContentTpl(optionData.fuData.maintsItem.maintsItemContentType);
          form.val("form-filter", {
            maintsItemContent: optionData.fuData.maintsItem.maintsItemContent,
          });
          //3.二维码类型渲染
          getQrTypeTpl(optionData.fuData.maintsItem.maintsItemContentType);
          form.val("form-filter", {
            qrType: optionData.fuData.maintsItem.qrTypeID,
          });
          //4.作业所属渲染
          if (
            optionData.fuData.maintsItem.belong2MacNo == null ||
            optionData.fuData.maintsItem.belong2MacNo === ""
          ) {
            form.val("form-filter", {
              belong2: "belong2SecD",
              belong2SecD: optionData.fuData.maintsItem.secDeptID,
            });
          } else {
            getAllMacNo(optionData.fuData.maintsItem.secDeptID);
            form.val("form-filter", {
              belong2: "belong2MacNo",
              belong2SecD: optionData.fuData.maintsItem.secDeptID,
              belong2MacNo: optionData.fuData.maintsItem.belong2MacNo,
            });
          }
        }

        function initPage(maintsItemContentType, belong2) {
          //初始化赋值
          form.val("form-filter", {
            maintsItemContentType: maintsItemContentType,
            belong2: belong2,
          });
          // 渲染作业内容
          getItemContentTpl(maintsItemContentType);
          // 渲染qrtype
          getQrTypeTpl(maintsItemContentType);
          // 获取全部工程List
          getAllSecD();
          $("#belong2MacNo").html("");
        }

        // 获取 记录内容 的 form 模板
        function getItemContentTpl(itemType) {
          let tplhtml = itemContentTpl.innerHTML;
          laytpl(tplhtml).render(itemType, function (html) {
            $("#itemContent").html(html);
            form.render();
          });
        }
        // 获取 QrType 的 form模板
        function getQrTypeTpl(maintsItemContentType) {
          // 文本时
          if (maintsItemContentType === "text") {
            let tplhtml = qrTypeTpl.innerHTML;
            laytpl(tplhtml).render(getAllQrType(), function (html) {
              $("#qrTypeOption").html(html);
              form.render();
            });
          }
          // 非文本时, 清空
          else {
            $("#qrTypeOption").html("");
          }
        }
        // 获取 QrType 的 list集合
        function getAllQrType() {
          let qrTypeList;
          $.ajax({
            async: false,
            url: parent.layui.myheader.baseUrl() + "/qrType/getAllQrTypeName",
            type: "get",
            success: function (res) {
              if (res.data.length > 0) {
                qrTypeList = [...res.data];
              } else {
                parent.layer.msg("未获取有效数据");
              }
            },
          });
          return qrTypeList;
        }
        // 获取 工程 的 form 模板
        function getAllSecD() {
          // 获取select 数据
          $.ajax(
            parent.layui.myheader.baseUrl() + "/secDept/getAllSecDeptName",
            {
              async: false, // 同步方法
              success: function (res) {
                if (res.data.length > 0) {
                  optionData.secdlist = [...res.data];
                } else {
                  optionData.secdlist = [];
                  parent.layer.msg("未获取有效数据");
                }
              },
            }
          );

          // 填充layui模板
          let getTpl = optionTpl.innerHTML;
          laytpl(getTpl).render(optionData.secdlist, function (html) {
            $("#belong2SecD").html(html);
            // form重新渲染select
            form.render("select");
          });
        }

        function itemTypeEvent() {
          form.on("radio(itemtype-filter)", function (data) {
            getItemContentTpl(data.value);
            getQrTypeTpl(data.value);
          });
        }

        function belong2Event() {
          // 单选切换事件
          form.on("radio(belong2-filter)", function (data) {
            console.log("belong2 radio");
            if (data.value == "belong2SecD") {
              $("#belong2MacNo").html("");
            } else if (data.value == "belong2MacNo") {
              laytpl(optionMacTpl.innerHTML).render({}, function (html) {
                $("#belong2MacNo").html(html);
                // form重新渲染select
                form.render("select");
              });
            }
            //return
            //$("[name=belong2MacNo] option:selected").text("")
            // 清空 select machineNo 模板
            //clearMacSelectTpl()

            // 获取并渲染secd
            getAllSecD();
          });
        }

        function belong2SecDSelectEvent() {
          // 所属工程选择框, 选择事件
          form.on("select(belong2SecD-filter)", function (data) {
            if (form.val("form-filter").belong2 === "belong2MacNo") {
              getAllMacNo(data.value);
            }
            return;

            // 单选选中 设备号时, ajax获取设备号list,并填充模板
            //if($("input[name='belong2']:checked").val()==="belong2MacNo"){
            //	getAllMacNo(data.value);
            //}
          });
        }

        // 获取和填充设备号 select 设备号
        function getAllMacNo(secDeptID) {
          $.ajax(
            parent.layui.myheader.baseUrl() + "/machine/getMachineList4SecDept",
            {
              async: false, //同步方法
              data: {
                secDeptID: secDeptID,
              },
              success: function (res) {
                if (res.data.length > 0) {
                  optionData.macnolist = [...res.data];
                } else {
                  optionData.macnolist = [];
                  parent.layer.msg("未获取有效数据");
                }
              },
            }
          );
          // 填充layui模板
          let getTpl = optionMacTpl.innerHTML;
          laytpl(getTpl).render(optionData.macnolist, function (html) {
            $("#belong2MacNo").html(html);

            //$("[name='belong2MacNo']").html(html)
            // form重新渲染select
            form.render("select");
          });
        }
        // 清空select 设备号模板
        function clearMacSelectTpl() {
          // 填充layui模板
          let getTpl = optionMacTpl.innerHTML;
          laytpl(getTpl).render([], function (html) {
            $("[name='belong2MacNo']").html(html);
            // form重新渲染select
            form.render("select");
          });
        }
      });
    </script>

    <script id="itemContentTpl" type="text/html">
      {{# if(d==="text"){ }}
      <label class="layui-form-label">作业题目</label>
      <div class="layui-input-block">
        <input
          type="text"
          name="maintsItemContent"
          lay-verify="required"
          autocomplete="off"
          placeholder="请输入作业内容"
          class="layui-input"
        />
      </div>
      {{# } else { }}
      <label class="layui-form-label">选择清单</label>
      <div class="layui-form-mid layui-word-aux">
        不同选项使用分号(<span style="color:red;font-size:110%">;</span> )分隔
      </div>
      <div class="layui-input-block">
        <textarea
          name="maintsItemContent"
          placeholder="请输入选择清单"
          lay-verify="required"
          class="layui-textarea"
        ></textarea>
      </div>
      {{# } }}
    </script>

    <script id="qrTypeTpl" type="text/html">
      <label class="layui-form-label">二维码类型</label>
      <div class="layui-input-block">
        <select name="qrType" lay-verify="required" lay-filter="qrType-filter">
          <option value=""></option>
          <option value="0">直接输入</option>
          {{# layui.each(d,function(index,item){ }}
          <option value="{{item.qrTypeID}}">{{item.qrTypeName}}</option>
          {{# }) }}
        </select>
      </div>
    </script>

    <script id="optionTpl" type="text/html">
      <label class="layui-form-label">所属工程</label>
      <div class="layui-input-block">
        <select
          name="belong2SecD"
          lay-verify="required"
          lay-filter="belong2SecD-filter"
        >
          <option value=""></option>
          {{# layui.each(d,function(index,item){ }}
          <option value="{{item.secDeptID}}">{{item.secDeptName}}</option>
          {{# }); }}
        </select>
      </div>
    </script>

    <script id="optionMacTpl" type="text/html">
      <label class="layui-form-label">所属设备</label>
      <div class="layui-input-block">
        <select
          name="belong2MacNo"
          lay-verify="required"
          lay-filter="belong2MacNo-filter"
        >
          <option value=""></option>
          {{# layui.each(d,function(index,item){ }}
          <option value="{{item.machineNo}}">{{item.machineNo}}</option>
          {{# }); }}
        </select>
      </div>
    </script>
  </body>
</html>
